<template>
  <div>
    <div style="width:100%" class="charge-top" v-loading="loading">
      <h1 class="title">{{$t('message.Charge')}}</h1>
      <div class="queding">
        <div>
          <el-select @change="getBiMoney" v-model="value" :placeholder="$t('message.select')">
            <el-option
              v-for="item in biMsg"
              :key="item.id"
              :label="item.virtualWalletName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
   
        <!-- 选择币种后 -->
        <div v-if="currentSize=='2' || currentSize=='3' ?true:false" class="choose-after">
          <div class="b-detail">
            <div>
              <span>{{$t('message.available')}}</span>
              <span>{{biCapital.userVirtualWallet.availableAmount}}</span>
            </div>
            <div>
              <span>{{$t('message.freeze')}}</span>
              <span>{{biCapital.userVirtualWallet.freezeAmount}}</span>
            </div>
            <div>
              <span>{{$t('message.total')}}</span>
              <span>{{biCapital.userVirtualWallet.availableAmount+biCapital.userVirtualWallet.freezeAmount}}</span>
            </div>
          </div>
          <div class="buy-b">
            <div class="buy-left">
              <p class="buy-left-title">
                <span>{{biCapital.virtualWallet.virtualWalletName}}</span>
              </p>
              <div v-if="currentSize=='2'?true:false" class="after-one">
                <p>{{$t('message.address')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.Recharge')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.Unrelated')}}</p>
                <div>
                  <el-checkbox-group v-model="chooseOr">
                    <el-checkbox :label="addressName" name="type"></el-checkbox>
                  </el-checkbox-group>
                  <span @click="seeAddress">{{$t('message.Check')}}</span>
                </div>
              </div>
              <div v-show="currentSize=='3'?true:false" class="after-two">
                <div id="textChoose">{{biCapital.userVirtualWallet.virtualWalletAddres}}</div>
                <div>
                  <span @click="copyText('textChoose','textCopy')">{{$t('message.Copy')}}</span>
                  <span @click="seeCode">{{$t('message.rcode')}}</span>
                </div>
              </div>
            </div>
            <div class="buy-right">
              <p>{{$t('message.Purchase')}}</p>
              <p>1、{{$t('message.forbidden')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.division')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.Outside')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.Theaddress')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.recoverable')}};</p>
              <p>2、{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.confirmation')}}{{biCapital.virtualWallet.virtualWalletName}}{{$t('message.automatically')}}</p>
              <p>3、{{$t('message.progress')}}。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charge-bottom">
      <h1 class="title" style="font-size:14px;">
        <span>{{$t('message.moneyrecordr')}}</span>
        <span @click="getRecord('')">{{$t('message.charging')}}</span>
      </h1>
      <!-- 表格 -->
      <el-table
        v-loading="loadingTwo"
        :data="tableData"
       >
        <el-table-column prop="createTime" :label="$t('message.time')" min-width="130"></el-table-column>
        <el-table-column prop="virtualWalletWithdrawAddress" :label="$t('message.addresss')" min-width="130"></el-table-column>
        <el-table-column prop="virtualWalletName" :label="$t('message.types')" min-width="50"></el-table-column>
        <el-table-column prop="virtualWalletWithdrawNumber" :label="$t('message.number')" min-width="80"></el-table-column>
        <el-table-column prop="tradeStatusDesc" :label="$t('message.Filling')" min-width="80"></el-table-column>
        <el-table-column prop="typeDesc" :label="$t('message.Stateof')" min-width="80"></el-table-column>
        <el-table-column prop="state" :label="$t('message.operation')" min-width="50"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="pages"
        :page-size="5"
        background
        layout="prev, pager, next"
        :total="totals"
      ></el-pagination>
    </div>
    <!-- 弹框 -->
    <div class="codeShow" v-if="codeShow" @click="codeShow = false">
      <div class="qrcodes-top">
        <div class="qrcodes" ref="qrCode" id="qrcode"></div>
        <p>{{$t('message.Scan')}}</p>
      </div>
    </div>
    <!-- copy桥接 -->
    <input type="text" id="textCopy" />
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import qs from "qs";
// import {
//   listVirtualWallet,
//   getUserVirtualWalletInfo,
//   getUserRechargeList
// } from "../../api/api";
export default {
  data() {
    return {
      page: 1,
      totals: 1,
      loadingTwo: false,
      loading: false,
      token: sessionStorage.getItem("token"),
      chooseOr: "", //是否勾线协议
      //列表
      tableData: [],
      codeShow: false, //弹出层显示与隐藏
      currentSize: "1",
      biMsg: [], //币种信息
      value: "", //所选币种值
      biColor: "-1", //判断颜色选择
      biCapital: [], //对应币种资金
      addressName: ""
    };
  },
  created() {
    this.getAllBi();
    this.getRecord();
  },
  mounted() {},
  methods: {
    pages(val) {
      console.log(val, 202020);
      this.page = val;
      this.getRecord(this.value);
    },
    //获取充币记录
    getRecord(num) {
      this.loadingTwo = true;
      var params = {
        token: JSON.parse(this.token),
        virtualWalletId: num,
        type: "1",
        page: 1,
        rows: 5
      };
      getUserRechargeList(qs.stringify(params)).then(res => {
        console.log(res.data, 333);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.totals = res.data.count;
          this.loadingTwo = false;
        }
      });
    },
    //查看地址
    seeAddress() {
      if (this.chooseOr == false) {
        this.$message({
          message: this.$t('message.confirm')
        });
        return false;
      }
      this.currentSize = "3";
    },
    //获取币种资产
    getBiMoney() {
      this.loading = true;
      var params = {
        token: JSON.parse(this.token),
        virtualWalletId: this.value
      };
      getUserVirtualWalletInfo(qs.stringify(params)).then(res => {
        if (res.data.code == 200) {
          this.biCapital = res.data.data;
          console.log(this.biCapital);
          console.log(this.biCapital.userVirtualWallet.virtualWalletAddres,9986)
          this.currentSize = "2";
          this.addressName =
            this.$t('message.understood') +
            this.biCapital.virtualWallet.virtualWalletName;
          // "-Biction";
          this.loading = false;
          this.getRecord(this.value);
        } else {
          this.$message({
            message: res.data.msg
          });
        }
      });
    },
    //币种颜色切换
    getBi(index) {
      this.biColor = index;
    },
    // 获取币种
    getAllBi() {
      this.loading = true;
      listVirtualWallet().then(res => {
        console.log(res.data);
        this.biMsg = res.data.data;
        this.loading = false;
      });
    },
    //点击按钮复制文本
    copyText(ctext, cinput) {
      var text = document.getElementById(ctext).innerText;
      var input = document.getElementById(cinput);
      input.value = text;
      input.select();
      document.execCommand("copy");
      this.$message({
        message: this.$t('message.success')
      });
    },
    //查看二维码
    seeCode() {
      this.codeShow = true;
      console.log(this.biCapital.userVirtualWallet.virtualWalletAddres,2525)
      setTimeout(() => {
        this.creatQrCode(this.biCapital.userVirtualWallet.virtualWalletAddres);
      }, 200);
    },
    //生成二维码
    creatQrCode(url) {
      var qrcode = new QRCode("qrcode", {
        text: url,
        width: 150,
        height: 150,
        colorDark: "#000000",
        colorLight: "#ffffff"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-table th>.cell{
  padding-top: 10px !important;
}
.codeShow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  .qrcodes-top {
    margin: 25vh auto;
    width: 190px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    .qrcodes {
      width: 150px;
      height: 150px;
      overflow: hidden;
      > img {
        padding: 0 !important;
        margin: 0 !important;
      }
    }
    > p {
      text-align: center;
      margin-top: 20px;
      color: #6881ff;
    }
  }
}

#textCopy {
  opacity: 0;
  position: fixed;
  left: -300%;
  top: -300%;
}
.charge-top {
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  background: rgba(247, 247, 251, 1);
  line-height: 40px;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #eee;
  span:last-child {
    font-size: 12px;
    color: #6881ff;
    margin-right: 20px;
    font-weight: normal;
  }
}
.queding {
  background: rgba(255, 255, 255, 1);
  padding: 10px 30px;
  box-sizing: border-box;
  margin: 30px 0;
  .chooseColor {
    background-color: #6881ff;
    border: 1px solid #6881ff;
    color: #fff !important;
  }
  .moneey {
    display: flex;
    margin-top: 20px;
    font-size: 14px;
    dl {
      color: #8c979d;
      padding: 6px 15px;
      border-radius: 20px;
      border: 1px solid #e6e6e6;
      margin-right: 10px;
    }
  }
}
.charge-bottom {
  border: 1px solid #eee;
}

// 后
.choose-after {
  margin: 10px 0;
  .b-detail {
    display: flex;
    div {
      margin-right: 30px;
      font-size: 14px;
      color: #2d2f56;
      span:first-child {
        color: #6881ff;
        font-weight: bold;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
  .buy-b {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    > div {
      width: 48%;
    }
    .buy-left {
      border: 1px solid #ebeeff;
      background-color: #fafbff;
      padding: 30px 10px;
      box-sizing: border-box;
      .buy-left-title {
        font-size: 14px;
        font-weight: bold;
        color: #2d2f56;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .after-one {
        p:first-child {
          font-size: 12px;
          margin-bottom: 10px;
          color: #8c979d;
          line-height: 24px;
        }
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          > span {
            font-size: 12px;
            color: #6881ff;
            border: 1px solid #6881ff;
            padding: 4px 10px;
            border-radius: 10px;
          }
        }
      }
      .after-two {
        div:first-child {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 10px;
          padding: 0 10px;
          box-sizing: border-box;
          color: #8c979d;
          border: 1px solid #eee;
          margin: 20px 0;
        }
        div:nth-child(2) {
          span {
            font-size: 10px;
            margin-right: 20px;
            color: #6881ff;
            border: 1px solid #6881ff;
            padding: 4px 10px;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }
    }
    .buy-right {
      padding: 10px;
      box-sizing: border-box;
      p:first-child {
        font-size: 14px;
        font-weight: bold;
        color: #2d2f56;
        margin-bottom: 20px;
      }
      p {
        font-size: 12px;
        margin-bottom: 10px;
        color: #8c979d;
        line-height: 18px;
      }
    }
  }
}
</style>

